<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<script src="js/bootstrap_5.1.1_js_bootstrap.bundle.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap_5.1.1_css_bootstrap.min.css">
<style>
	*{
	   margin: 0px;
	   padding: 0px;
	}
	body{
		background-color: rgb(245, 246, 250);
	}
	#box{
		height: 100vh;
		width: 100vw;
	}
	li{
		list-style: none;
	}
	a{
	   text-decoration: none;
	   color: black;
	   font-weight:bold;
	}
	a:hover{
		color: rgb(105, 109, 115);
	}
	nav{
	   background-color:white;
	   display: inline-block;
	   width: 100vw;
	   height: 10vh;
	   position: fixed;
	   z-index: 1;
	   font-size: 1vw;
	   color: rgb(93, 79, 87);
	}
	nav #log{
		height: 100%;
		display: inline-block;
		position: relative;
		left: 10%;
		font-size: 3vw;
		text-align: auto;
	}
	nav .help{
		float: right;
		height: 100% ;
		line-height: 250%;
		position: relative;
		margin-right: 5%;
		top: 15%;
		right: 10%;
		font-size: 1.5vw;
	}
	#left{
		position: relative;
		float: left;
		top: 13vh;
		width: 20%;
		background-color: white;
	}
	#right{
		position: relative;
		float: right;
		right: 5%;
		top: 10vh;
		height: 92%;
        width: 70%;
	}
	#right div{
		position: relative;
		background-color: white;
		margin-top: 2%;
		float: left;
		height: 40%;
		width: 48%;
	}
	#right .rl{
		position: relative;
		background-color: white;
		margin-top: 2%;
		height: 40%;
		width: 48%;
		margin-left: 3%;
	}
	#headImg{
         height: 280px;
         width: 100%;
	}
	#userName{
		text-align: center;
		width: 100%;
		line-height: 200%;
		font-size: 1.5vw;
		height: 10%;
	}
	ul li{
		text-align: center;
		position: relative;
		height: 20%;
		line-height: 200%;
	}
	.up{
        position: relative;
        right: 1vw;
		width: 100%;
		color: white;
		background-color: rgb(251, 114, 153);
	}
	.pageBar{
		height: 4vh;
		width: 15vw;
		margin: auto;
		position: relative;
		left: 10vw;
		bottom: 8vh;
	}
</style>
<body>
	<nav>
		<img src="img/logo.png" alt="" id="log">
		<a href="#" class="help" id='a1'>返回</a>
	</nav>
	<div id="box">
		<div id="left">
		    <img src="" alt="" id="headImg">
		    <p id="userName">username</p>
		</div>
		<div id="right">
			
		</div>
	</div>
	<div class="pageBar">
		
	</div>
</body>
<script src="js/jquery.min.js"></script>
<script>
	$("a").mouseenter(function() {
		$(this).css({
			color: 'rgb(211,155,32)',
		});
	}).mouseleave(function() {
		$(this).css({
			color: 'rgb(93, 79, 87)',
		});
	});
	$("ul a li").mouseenter(function() {
		$(this).css('background', 'rgb(155,155,155)');
	}).mouseleave(function() {
		$(this).css('background', 'rgb(166,166,166)');
	});
	window.onload=function(){
		searchUser();
		searchPost(1,4);
	}
	var params=location.search.substring(1);
	function searchUser(){
		$.ajax({
			type:"POST",
			url:"User.do",
			data:{
				userId:params.split("&")[0].split("=")[1]
			},
			success:function(data){
				$("#headImg").attr("src",data.userHeadImg);
				$("#userName").html("<h3>"+data.userName+"</h3>");
				$("#right").find("p").html("<h3>"+data.individualResume+"</h3>");
			}
		})
	}
	var currt=0;
	function searchPost(pageNum,pageSize){
		$.ajax({
			type:"POST",
			url:"PostUser.do",
			data:{
				userId:params.split("&")[0].split("=")[1],
				pageNum:pageNum,
				pageSize:pageSize
			},
			success:function(data){	
				console.log(data);
				var Post =data.data;
				var currt=data.pageNum;
				for(var i=0;i<Post.length;i++){
					var post=Post[i];
					var str1=post.postText.split("<p>").join("").split("</P>").join("").split("<P>").join("").split("</p>").join("").substring(0,300)+"...";
					var str2=post.postTitle.split("<h2>").join("").split("</h2>").join("").split("<h3>").join("").split("</h3>").join("");
					var $p=$("<p>"+str1+"</p>");
					var $p1=$("<p>"+str2+"</p>");
					var $div=$("<div onclick='searchpost("+post.postId+")'></div>");
					$div.append($p1).append($p);
					$("#right").append($div);
				}
			}
		})
	}
	function searchpost(postId){
		window.location.href ="post_reply1.html?id="+postId+"&uId="+params.split("&")[0].split("=")[1]+"&uid="+params.split("&")[1].split("=")[1];
	}
	$(".help").click(function(){
		window.location.href ="fans.html?id="+params.split("&")[1].split("=")[1];
	})
	$("#log").click(function(){
		window.location.href ="index.html?id="+params.split("&")[1].split("=")[1];
	})
	$("#a1").click(function(){
		window.location.href =document.referrer;
	})
</script>
</html>